<template>
	<view>
		<!-- 查看个人信息 -->
		<u-mask :show="showinfo"   :custom-style="{background: 'rgba(0, 0, 0, 0.85)'}" @click="showinfo = false
		">
			<view class="warp">
				<view class="maskboxzj">
					<view class="m_contentzj">
						<view class="topbox">
							<view class="ucbox">
								<view class="m_header">
									<image :src="list.pic?headerimgurl + list.pic:'http://img.cpgm.cc/panda/static/login/logo.png'" mode="" />
								</view>
								<view class="infofldc">
									<text>{{list.nickname?list.nickname:'潮玩新人'}}</text>
									<text>id:{{list.invite_code}}</text>
								</view>
							</view>
						</view>
						<view class="infocontent">
							<view class="info_itemzj">
								<view>
									<text>微信号</text>
									<text>{{list.wx?list.wx:'暂未设置'}}</text>
								</view>
								<view class="button" @click.stop="textcopy(list.wx)">复制</view>
							</view>
							<view class="info_itemzj">
								<view>
									<text>QQ号</text>
									<text>{{list.qq?list.qq:'暂未设置'}}</text>
								</view>
								<view class="button" @click.stop="textcopy(list.qq)">复制</view>
							</view>
							<view class="info_itemzj">
								<view>
									<text>ta加入的群</text>
								</view>
								<text class="groupp" v-if="list.qr_code == '' || list.qr_code == null">暂未设置</text>
								<image class="qrimg" v-else @click.stop="seeimg(headerimgurl + list.qr_code)" :src="headerimgurl + list.qr_code" mode="" />
							</view>
							<view class="introduce">
								<view>
									<text>个人介绍</text>
								</view>
								<view class="introducecont">
									{{list.desc?list.desc:'ta很懒，什么都没有介绍～'}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
import config from '@/common/config/index'
	export default {
		name:"Userinfo",
		props:{
			id:{
				type:String,
				default:''
			},
			commonlist:{
				type:Object,
				default:()=>{}
			},
			type:{
				type:Number,
				default:0,
			}
		},
		data() {
			return {
				imgurl:config.imgurl,
				headerimgurl:config.headerimgurl,
				showinfo:false,
				list:'',
			};
		},
		created() {
			// this.getInfo()
		},
		methods: {
			show(){
				this.getInfo()
			},
			seeimg(img){
				uni.previewImage({
					urls: [img],
					longPressActions: {
						success: function(data) {
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// 复制文本
			textcopy(text){
				console.log(222);
				this.$p.copy(text)
			},

			// 获取个人
			async getInfo(){

				// type == 1时 为id请求  2 时为prop传参
				if(this.type == 1) {
					let res = await this.$http.index.getInfo({
						id:this.id
					})
					this.list = res.data
					if(res.code == 1) {
						this.showinfo = true
					}else {
						this.$u.toast(res.msg)
					}
				}else {
					this.list = this.commonlist
					this.showinfo = true
				}
			},
		},
	}
</script>

<style lang="less">


	
	// 弹窗
	.warp {
		width: 90%;
		position: relative;
		left: 5%;
		top: 50%;
		transform: translateY(-50%);
	}


	.maskboxzj {
		
		position: relative;
		background: #FFFFFF;
		border-radius: 19px;
	}

	.top {
		position: relative;
		width: 100%;

		image {
			width: 100%;
		}
	}

	.top p {
		width: 100%;
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
		text-align: center;
		line-height: 30px;
		color: #B04613;
		font-size: 14px;
		font-weight: 600;
	}

	.topbox {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.ucbox {
			display: flex;
			align-items: center;
			flex: 1;
		}
	}
	.infofldc {
		display: flex;
		flex-direction: column;
		margin-left: 15px;

		text:nth-child(1) {
			color: #343434;
			font-size: 16px;
			font-weight: 600;
		}
		text:nth-child(2) {
			color: #696969;
			font-size: 14px;
			margin: 5px 0;
			font-weight: 600;
		}
		text:nth-child(3) {
			color: #fff;
			font-size: 14px;
			font-weight: 600;
		}
	}


	.m_header {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		width: 70px;
		height: 70px;
		position: relative;

		image {
			width: 60px;
			height: 60px;
			border-radius: 50%;
		}

		text {
			color: #fff;
			font-size: 14px;
			margin-top: 5px;
			font-weight: 600;
		}
	}
	
	.m_contentzj {
		position: relative;
		background: #fff;
		border-radius: 10px;
		padding: 12px;
	}

	.introduce {
		margin: 15px 0;
		background: rgba(254,225,195,0.13);
		border-radius: 6px;
		padding: 10px;
		min-height: 80px;
		display: flex;
		flex-direction: column;

		view {
			display: flex;
			align-items: center;

			text {
				color: #343434;
				font-size: 14px;
				font-weight: 600;
			}
		}
	}
	.info_itemzj {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 15px 0;
		background: rgba(254,225,195,0.13);
		border-radius: 6px;
		padding: 10px;
		min-height: 50px;
		
		view {
			display: flex;
			align-items: flex-start;
			flex-direction: column;
			
			image {
				width: 35px;
				margin-right: 10px;
			}
			
			text:nth-child(1) {
				color: #343434;
				font-size: 14px;
				font-weight: 600;
			}
			text:nth-child(2) {
				color: #696969;
				font-size: 12px;
				margin-top: 5px;
			}

		}


		image {
			width: 50px;
		}

		.button {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 63px;
			height: 31px;
			background: linear-gradient(90deg, #E5BB94 0%, #EEDDCF 100%);
			border-radius: 5px;
			color: #151515;
			font-size: 13px;
			font-weight: 600;

		}
	}

	.close {
		position: absolute;
		right: 10px;
		top: 0;
		width: 35px;
	}


	.introducecont {
		width: 100%;
		box-sizing: border-box;
		margin-top: 10px;
		color: #696969;
		line-height: 14px;
		word-break: break-all;
		line-height: 18px;
	}

	.groupp {
		color: #fff;
		font-size: 14px;
		font-weight: 600;
	}

	.qrimg {
		width: 50px;
		height: 50px;
	}

	.ucardlist {
		display: flex;
		flex-direction: column;
		color: #fff;
		font-size: 12px;

		text {
			font-size: 12px;
			color: #fff;
		}
	}
	

</style>